<template>
    <div>
        <el-table :data="tableData" style="width: 100%" class="table">
            <el-table-column label="活动区域" prop="region">
            </el-table-column>
            <el-table-column label="活动性质" prop="type">
            </el-table-column>
            <el-table-column label="活动姓名" prop="name">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="提示" class="dialog" :visible.sync="dialogVisible" width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="城市" value="city"></el-option>
                        <el-option label="城镇" value="chenzhen"></el-option>
                        <el-option label="农村" value="nongcun"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio :label="item.value" v-for="(item,index) in  resourceList" :key="index">{{item.label}}</el-radio>
                        <!-- <el-radio label="线下场地免费"></el-radio> -->
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动性质" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-tag style="margin-top:20px;background:#3491fa;color:#fff;border-radius: 0px;" type="small">标签一</el-tag>
        <hr>
    <div class="father">
        <div class="son">111</div>
        <div class="son">111</div>
        <div class="son">111</div>
        <div class="son">111</div>
        <div class="son">111</div>
        <div class="son">1111</div>
    </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                type: '西方级',
                name: '圣诞节',
                region: '北京'
            }, {
                type: '世界级',
                name: '春节',
                region: '上海'
            }, {
                type: '亚洲级',
                name: '元旦',
                region: '广州'
            }, {
                type: '国家级',
                name: '国庆节',
                region: '深圳'
            }],
            dialogVisible: false,
            ruleForm: {
                name: '',
                region: '',
                type: [],
                resource:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
            },
            resourceList:[
                {label:'福州',value:1},
                {label:'厦门',value:2},
                {label:'泉州',value:3},
                {label:'华西村',value:1},
                {label:'华东村',value:2},
                {label:'华北村',value:3},
            ]

        }
    },
    methods: {
        handleEdit(row) {
            console.log(row, '90');
            this.ruleForm.name = row.name
            let a  = document.querySelector('.dialog')
            console.log(a,'a');
            this.dialogVisible = true
        

        }

    },
    created() {

    },
}
</script>
<style scoped>
.father{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.son{
  background: pink;
  width:calc((100% - 40px) / 3);
  margin-right: 20px;
  margin-bottom: 10px;
}
.father .son:nth-child(3n){
    background: yellow;
    margin-right: 0px;
}
</style>